<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/layui/lib/layui-v2.5.5/css/layui.css"
          media="all">
    <%--    引入dtree样式--%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/layui_ext/dtree/dtree.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/layui_ext/dtree/font/dtreefont.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/layui/css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <!-- 搜索条件 -->
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">用户账号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="loginName" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn" lay-submit lay-filter="data-search-btn">
                                <i class="layui-icon layui-icon-search"></i>搜索
                            </button>
                            <button type="reset" class="layui-btn layui-btn-warm"><i
                                    class="layui-icon layui-icon-refresh-1"></i>重置
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <!-- 表格工具栏 -->


        <!-- 数据表格 -->
        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <!-- 行工具栏 -->
        <script type="text/html" id="currentTableBar">
            <button class="layui-btn layui-btn-xs layui-btn-warm" lay-event="edit"><i class="layui-icon layui-icon-refresh"></i>重置密码 </button>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete"><i class="layui-icon layui-icon-close"></i>删除该用户</a>
        </script>


        <!-- 分配菜单的弹出层 开始 -->
        <div style="display: none;" id="selectRoleMenuDiv">
            <ul id="roleTree" class="dtree" data-id="0"></ul>
        </div>
    </div>
</div>
<script src="${pageContext.request.contextPath}/statics/layui/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script>
    layui.extend({
        dtree: "${pageContext.request.contextPath}/statics/layui_ext/dtree/dtree",
    }).use(['form', 'table', 'laydate', 'jquery','layer','dtree'], function () {
        var $ = layui.jquery,
            form = layui.form,
            laydate = layui.laydate,
            layer = layui.layer,
            dtree= layui.dtree,
            table = layui.table;

        //渲染表格组件
        var tableIns = table.render({
            elem: '#currentTableId',
            url: '${pageContext.request.contextPath}/admin/user/list',
            toolbar: '#toolbarDemo',
            cols: [[
                {field: 'id', width: 100, title: '用户编号', align: "center"},
                {field: 'loginName', minWidth: 200, title: '用户账号', align: "center"},
                {field: 'phone', minWidth: 200, title: '手机号码', align: "center"},
                {field: 'createDate', minWidth: 200, title: '注册时间', align: "center"},
                {title: '操作', minWidth: 120, toolbar: '#currentTableBar', align: "center"}
            ]],
            page: true,
            done: function (res, curr, count) {
                //判断当前页码是否是大于1并且当前页的数据量为0
                if (curr > 1 && res.data.length == 0) {
                    var pageValue = curr - 1;
                    //刷新数据表格的数据
                    tableIns.reload({
                        page: {curr: pageValue}
                    });
                }
            }
        });


        /**
         * 监听搜索窗口
         */
        form.on('submit(data-search-btn)', function (data) {
            console.log(data.field)
            //执行搜索重载
            table.reload('currentTableId', {
                where: data.field,
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            }); //只重载数据
            return false;
        });

        /**
         * 监听头部工具栏事件
         */
        //toolbar是头部工具栏事件
        // currentTableFilter是表格lay-filter过滤器的值
        table.on("toolbar(currentTableFilter)",function (obj) {
            switch (obj.event) {
                case "add"://添加按钮
                    openAddWindow();//打开添加窗口
                    break;
            }
        });

        /**
         * 监听行工具栏事件
         */
        table.on("tool(currentTableFilter)",function (obj) {
            switch (obj.event) {
                case "edit":
                    openResetPwdWindow(obj.data);
                    break;
                case "delete":
                    openDeleteWindow(obj.data);
                    break;
                case "grantMenu":
                    openGrantMenuWindow(obj.data);
                    break;
            }
        })

        var url;//提交地址
        var mainIndex;//打开窗口的索引
        /**
         * 打开添加窗口
         */
        function openAddWindow(data) {
            mainIndex = layer.open({
                type: 1,//打开类型
                title: "添加角色",//窗口标题
                area: ["800px", "400px"],//窗口宽高
                content: $("#addOrUpdateWindow"),//引用的内容窗口
                success: function () {
                    //清空表单数据
                    $("#dataFrm")[0].reset();
                    //添加的提交请求
                    url = "/admin/role/addRole";
                }
            });
        }
        /**
         * 打开修改窗口
         */
        function openUpdateWindow(data){
            mainIndex = layer.open({
                type: 1,//打开类型
                title: "修改角色",//窗口标题
                area: ["800px", "400px"],//窗口宽高
                content: $("#addOrUpdateWindow"),//引用的内容窗口
                success: function () {
                    form.val("dataFrm",data);
                    //添加的提交请求
                    url = "/admin/role/updateRole";
                }
            });
        }

        /**
         *打开删除窗口
         */
        function openDeleteWindow(data){
            mainIndex=layer.open({
                title:"删除角色",
                content:"确定要删除【<b style=\"color:#ff6347;\">"+data.loginName+"</b>】这个角色吗？",
                btn: ["<i class=\"layui-icon layui-icon-ok\"></i> 确定","<i class=\"layui-icon layui-icon-close\"></i> 取消"],
                yes:function () {
                    console.log(data)
                    url="${pageContext.request.contextPath}/admin/user/delete";
                    $.post(url,"id="+data.id,function(result){//查询角色下是否有员工
                        layer.close(mainIndex);
                        if(result.success){//如果角色下有员工
                            tableIns.reload();
                        }
                        layer.msg(result.message);
                    },"json");
                },
                btn2: ""
            })
        };

        /**
         *打开重置密码窗口
         */
        function openResetPwdWindow(data){
            mainIndex=layer.open({
                title:"重置密码",
                content:"确定要重置【<b style=\"color:#ff6347;\">"+data.loginName+"</b>】的密码吗？",
                btn: ["<i class=\"layui-icon layui-icon-ok\"></i> 确定","<i class=\"layui-icon layui-icon-close\"></i> 取消"],
                yes:function () {
                    url="/admin/user/resetPwd";
                    $.post(url,"id="+data.id,function(result){
                        if (result.success){//成功
                            tableIns.reload();
                            layer.close(mainIndex);
                        }
                        layer.msg(result.message);
                    },"json");
                },
                btn2:""
            })
        };

        /**
         *打开分配菜单窗口
         */
        var  param1;
        function openGrantMenuWindow(data){
            mainIndex = layer.open({
                type: 1,//打开类型
                area:["400px","550px"],
                title:"分配【<span style='color: red'>"+data.loginName+"</span>】的功能菜单",
                content: $("#selectRoleMenuDiv"),//引用的内容窗口
                btn: ["<i class=\"layui-icon layui-icon-ok\"></i> 确定","<i class=\"layui-icon layui-icon-close\"></i> 取消"],
                success: function () {
                    //渲染dtree组件
                    dtree.render({
                        elem: "#roleTree",//绑定ul标签的ID属性值
                        url: "${pageContext.request.contextPath}/admin/role/initMenuTree?roleId="+data.id, //请求地址
                        dataStyle: "layuiStyle",  //使用layui风格的数据格式
                        dataFormat: "list",  //配置data的风格为list
                        response:{message:"msg",statusCode:0},  //修改response中返回数据的定义
                        checkbar: true,
                        checkbarType: "all", // 默认就是all，其他的值为： no-all  p-casc   self  only
                    });
                    url="${pageContext.request.contextPath}/admin/role/saveRoleMenu"
                },
                yes:function () {
                    var params = dtree.getCheckbarNodesParam("roleTree");
                    console.log(params);
                    var menuIdList =[];
                    for(var i=0;i<params.length;i++){
                        menuIdList.push(params[i].nodeId);
                    }
                    menuIdList=menuIdList.join(",");
                    $.post(url,{"menuIdList":menuIdList,"roleId":data.id},function(result){
                        if(result.success){//成功
                            layer.close(mainIndex);
                        }
                        layer.msg(result.message);
                    },"json");
                },
                btn2:"",
            });
        }

        /**
         * 监听弹出框的按钮
         */
        form.on('submit(doSubmit)', function(data){
            console.log(data)
            $.post(url,data.field,function(result){
                if (result.success){
                    tableIns.reload()//刷新数据
                    layer.close(mainIndex);//关闭页面
                }
                layer.msg(result.message);//提示信息
            },"json");
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        // 绑定节点点击
        dtree.on("node('selectRoleMenuDiv')" ,function(){
            console.log("zheli")
        });
    });
</script>

</body>
</html>
